import { computed } from 'vue'
import './index.scss'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { isWhiteListUser, getAssetsFiles } from '@/utils';

export default {
  setup() {
    const route = useRoute()
    const userStore = useUserStore()
    const deviceIsEmpty = typeof route.query.device === 'undefined' && userStore.device.length === 0
    const notAndroid = typeof android === 'undefined'
    const displayBoot = computed(() => {
        if (isWhiteListUser(route.query.device as string  || userStore.device) || !notAndroid) {
            return false
        }
        return deviceIsEmpty || notAndroid
    })
    return { displayBoot }
  },
  template: `
    <Teleport to="body">
    <div class="boot" :style="{ display: displayBoot ? 'block' : 'none' }">
        <div class="boot-header">
            <img class="boot-header_img" src="${getAssetsFiles('logo.png')}" alt="logo">
            <h4 class="boot-header_h4">KJV Bible</h4>
        </div>
        <div class="boot-main">
            <h1 class="boot-main_h1">KJV Bible - Audio Study</h1>
            <p class="boot-main_p">Spend time with God and grow your faith everyday</p>
            <div class="download">
                <a href="https://app.adjust.com/1af1w1ra?campaign=old_package">
                    <img src="${getAssetsFiles('googlePlay.svg')}" alt="googlePlay">
                </a>
            </div>
        </div>
    </div>
    </Teleport>
    `
}

